<template>
  <div>
    <bread>
      <h1>职位\职称配置</h1>
    </bread>
    <page-content isCard>
      <section>
        <div class="section-header">
          <h1>学校信息</h1>
          <small>设定学校基本信息</small>
        </div>
        <div class="section-content">
          <el-table stripe :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="zip" label="邮编">
            </el-table-column>
            <el-table-column prop="province" label="省份">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="dialogFormVisible2=true" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tr-operate">
            <el-button type="text" @click="dialogFormVisible = true">
              <i class="el-icon-circle-plus"></i>
              新增开支范围
            </el-button>
          </div>
        </div>
      </section>
      <!-- 新增 -->
      <el-dialog title="添加自定义职位" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form" label-width="80px" class="demo-ruleForm">
          <el-form-item label="职称名字">
            <el-input type="text" v-model="form.name" auto-complete="off" placeholder="请输入您需要添加的职位名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="编辑自定义职位" :visible.sync="dialogFormVisible2" width="30%">
        <el-form :model="form" label-width="80px" class="demo-ruleForm">
          <el-form-item label="职称名字">
            <el-input type="text" v-model="form.name" auto-complete="off" placeholder="请输入您需要添加的职位名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" plain @click="handleDelete">删 除</el-button>
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
        </div>
      </el-dialog>
    </page-content>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 2,
        date: '2016-05-02',
        name: '==小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      dialogFormVisible: false,
      form: {
        name: '',
      },
      dialogFormVisible2: false,
    }
  },
  methods: {
    handleDelete() {
      this.$confirm('确认删除「院长助理」这个职位', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '../common.scss';
</style>
